<template>
  <div>
    <Bread></Bread>
    <el-card class="box-card">
      <el-input placeholder="添加商品信息" :disabled="true"></el-input>

      <el-steps :space="200" :active="nowTab-0" finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成 "></el-step>
      </el-steps>
      <!-- 标签页 -->
      <el-tabs tab-position="left" style="height: 200px;" @tab-click="changeTab" v-model="nowTab">
        <el-tab-pane label="基本信息" name="0">
          <el-form :model="goodsobj" label-width="80px">
            <el-form-item label="商品名称">
              <el-input v-model="goodsobj.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
              <el-input v-model="goodsobj.goods_price"></el-input>
            </el-form-item>
            <el-form-item label="商品数量">
              <el-input v-model="goodsobj.goods_number"></el-input>
            </el-form-item>
            <el-form-item label="商品重量">
              <el-input v-model="goodsobj.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品分类">
              <el-cascader
                v-model="goodsobj.goods_cat"
                :options="catelist"
                @change="handleChange"
                :props="setobj"
              ></el-cascader>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="1"></el-tab-pane>
        <el-tab-pane label="商品属性" name="2">角色管理</el-tab-pane>
        <el-tab-pane label="商品图片" name="3">
          <el-upload
            class="upload-demo"
            action="https://www.liulongbin.top:8888/api/private/v1/upload"
            :headers="fileobj"
            :on-success="upload"
            :on-remove="removeFile"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="商品内容" name="4">
          <quill-editor ref="myTextEditor" v-model="goodsobj.goods_introduce" style="height:100%"></quill-editor>
          <el-button type="primary" @click="addgoods">添加商品</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import Bread from "@/components/breadmenu";
export default {
  components: { Bread },
  data() {
    return {
      nowTab: 0,
      //商品对象
      goodsobj: {
        goods_name: "",
        goods_price: 0,
        goods_number: 0,
        goods_weight: 0,
        goods_cat: "",
        goods_introduce: "",
        pics: []
      },
      //分类数据
      catelist: [],
      setobj: {
        label: "cat_name",
        value: "cat_id",
        children: "children"
      },
      //文件上传设置的对象
      fileobj: {
        "Authorization": ""
      }
    };
  },
  methods: {
    changeTab() {},
    handleChange() {},
    //文件上传成功后
    upload(res, file, filelist) {
      console.log(res.data.tmp_path);
      //res就是上传成功的返回值,res.data.tmp_path是咱们要的数据
      var obj = { pic: res.data.tmp_path };
      console.log(obj);
      this.goodsobj.pics.push(obj);
    },
    //文件列表删除后
    removeFile(file, filelist) {
      //删除文件名字
      var filename = file.response.data.tmp_path;
      //根据名字找索引
      var index = this.goodsobj.pics.findIndex((item, key) => {
        return (item.pic = filename);
      });
      //再根居索引删除
      this.goodsobj.pics.splice(index, 1);
    },

    //添加商品
  addgoods() {
      //先转换商品分类
      // console.log(this.goodsobj.goods_introduce)
      console.log(this.goodsobj);
      this.goodsobj.goods_cat = this.goodsobj.goods_cat.join(",");
    this.$http.post("goods", this.goodsobj).then((res)=>{
  console.log(res.data);
    })
    }
  },
  mounted() {
    //设置fileobj
    var loginmsg = JSON.parse(sessionStorage.getItem("loginmsg"));
    this.fileobj.Authorization = loginmsg.token;
    //获取当前所有分类数据
    this.$http.get("categories").then(res => {
      // console.log(res);
      this.catelist = res.data.data;
    });
  }
};
</script>
<style lang="scss">
.el-card {
  margin-top: 20px;
  height: 100% !important;
}
.el-tabs {
  //   margin-top: 20px;
  height: 100% !important;
}
.el-input {
  text-align: center;
  margin-top: 10px;
}
.el-steps {
  margin-top: 15px;
}
.el-step__title {
  font-size: 10px !important;
}
.el-tabs__item {
  font-size: 10px !important;
}
.ql-container {
  height: 200px !important;
}
</style>